<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      width: 500px;
      height: 400px;
      background-color: #66ccff;
    }
    .ulContent{
      width: 500px;
      border-top: 5px solid #000;
    }
    #Uls{
      padding: 0;
    }
    #Uls li{
      background-color: #66ccff;
      list-style-type: none;
    }
    #Uls li div{
      padding-left: 10px;
    }
  </style>
  <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
  <div class="box">
    昵称：<input type="text" id="user">
    <div>
    <textarea name="content" id="content" cols="30" rows="10"></textarea>
    </div>
    <input type="checkbox" id="niming">匿名
    <button id="submit">发表</button>
    <div class="ulContent">
      <ul id="Uls"></ul>
    </div>
  </div>

  <script>
    var $submit = $("#submit");
    var $Uls = $("#Uls")
    $submit.click(function(){
      var $user = $("#user").val();
      if($user == ""){
        alert("昵称不能为空");
        return;
      }
      var $content = $("#content").val();
      var $niming = $("#niming").prop("checked");
      if($niming){
        $user = "路人甲";
      }

      var $newLi =  $("<li></li>");//内容li，标题
      var $newContent = $("<div></div>");//内容
      var now = new Date();
      var hour = now.getHours();//得到小时
      var minu = now.getMinutes();//得到分钟
      var sec = now.getSeconds();//得到秒
      var timer = hour + ":" + minu + ":" + sec;
      $newLi.text($user + timer) //给新创建的li标签添加昵称
      $newContent.text($content) //给新创建的div添加内容
      $newLi.append($newContent) //把div添加进li
      $Uls.append($newLi) //把li添加进ul中
    })
  </script>
</body>
</html>